<!-- 个人中心界面，包括上传头像和修改密码
 涉及到的路径需要修改成static中的路径，包括css文件、JS文件、以及img文件-->
<!DOCTYPE html>
<html lang="en">

<head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人中心</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'css/user_center.css' %}">
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">个人中心</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img"> tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">个人中心</a></dd>
                    <dd><a href="">设置</a></dd>
                    <dd><a href="">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="../profile">个人信息</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="#">账户信息</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">

        <div class="userMsg ">
            <label class='layui-form-label'>账户密码</label>
            <button class="layui-btn" onclick="pwdChange()">修改密码</button>
        </div>
    </div>
</div>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static 'jquery/jquery-3.2.1.js' %}"></script>
<script src="{% static 'layer/layer.js' %}"></script>

<script>
    function pwdChange(){
        location.href='pwd_change/'
    }
    layui.use(['element', 'layer', 'util', 'form', 'table'], function () {
        var element = layui.element,
            layer = layui.layer,
            util = layui.util,
            form = layui.form,
            table = layui.table,
            $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {
                    icon: 0
                });
            },
            menuRight: function () {
                layer.open({
                    type: 1,
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt' //右上角
                    ,
                    anim: 5,
                    shadeClose: true
                });
            }
        });
    });

    //点击修改密码的按钮，弹出修改密码的对话框
    function onUpdatePwd() {
        //页面层-自定义
        //页面层-自定义
        layer.open({
            type: 1,
            title: "修改密码",
            area: ['400px', '300px'],
            shadeClose: true, //点击遮罩关闭
            content: $("#updatePwd_main"),
            success: function (layero, index) {
            },
            yes: function () {
            }
        });
    }

    //修改密码
    $("#updatePwd").on("click", function () {
        $.ajax({
            url: "",
            type: "post",
            data: {
                "newPwd": $("#newPwd").val(),
                "confirmPwd": $("#confirmPwd").val(),
            },
            dataType: "json",
            headers: {
                "X-CSRFToken": "{{ csrf_token }}"
            },
            success: function (res) {
                if (!("flag" in res)) {
                    alert("未知错误");
                    return;
                } else if (res["flag"] !== 0) {
                    alert(res["flag"]);
                    return;
                }
                //关闭弹窗更新显示
                layer.close(layer.index);

            },
            error: function () {
                alert("ajax请求错误");
            }
        })
    })

    //密码框小眼睛隐藏和显示的JS代码
    $(function () {
        var a = 0;
        $(".secreteyesk1").hide();
        $(".secreteyesk2").hide();
        $('.eyes1').click(function () {
            a += 1;
            if (a % 2 == 0) {
                $('.secreteyesk1').hide();
                $('.secreteyes1').show();
                $('.secret1').prop('type', 'password');
            } else if (a % 2 != 0) {
                $('.secreteyes1').hide();
                $('.secreteyesk1').show();
                $('.secret1').prop('type', 'text');
            }
        })
        a = 0;
        $('.eyes2').click(function () {
            a += 1;
            if (a % 2 == 0) {
                $('.secreteyesk2').hide();
                $('.secreteyes2').show();
                $('.secret2').prop('type', 'password');
            } else if (a % 2 != 0) {
                $('.secreteyes2').hide();
                $('.secreteyesk2').show();
                $('.secret2').prop('type', 'text');
            }
        })
    })
</script>

</body>

</html>